Installation

Follow the steps below to get started with your Site Template:

Unzip the downloaded zip file themeforest-xxxxx.zip folder
Open folder named main-file
Here you will find assets folders of all files
You will need to Upload these files to your Web Server using FTP in order to use it on your Website.
Make sure you upload the required files/folders listed below:
- css - Extra Stylesheets Folder plus Main Stylesheet File
- images - Images Folder
- jquery - Javacripts Folder
- video - Videos Folder
- .html extension files - main page template File
You will need to Upload these files to your Web Server using FTP in order to use it on your Website and give the paths of files in .html extension files.
You're now good to go..! Start adding your Content and show off your Brand New Beautiful Website in style.

HTML Structure

Index Screen Structure

Index Screen follows a simple coding structure. here is the sample:

                    <!DOCTYPE html>
                    <html lang="zxx" dir="ltr">
                    <!-- All your metas will be here -->
                    <meta charset="UTF-8">
                    <meta http-equiv="X-UA-Compatible" content="IE=edge">
                    <meta name="viewport" content="width=device-width, initial-scale=1.0">
                    <head>
                    <!-- Your Stylesheets, Title -->
                    ...
                    </head>
                    <body>
                    <!-- Index Screen Details Start -->
                    <div class="site_content">
                    <!-- Prelaoder Section -->
                    <div class="loader-mask">
                    ...
                    </div>
                    <!-- All Content Section -->
                    <section id="splashscreen">
                    ...
                    </section>
                    </div>
                    <!-- Index Screen Details End -->
                    <!-- Your All Scripts will be here ->
                    ...
                    </body>
                    </html>

OnBoarding Screen Structure

OnBoarding Screen follows a simple coding structure. here is the sample:

                    <!DOCTYPE html>
                    <html lang="zxx" dir="ltr">
                    <!-- All your metas will be here -->
                    <meta charset="UTF-8">
                    <meta http-equiv="X-UA-Compatible" content="IE=edge">
                    <meta name="viewport" content="width=device-width, initial-scale=1.0">
                    <head>
                    <!-- Your Stylesheets, Title -->
                    ...
                    </head>
                    <body>
                    <!-- OnBoarding Screen Details Start -->
                    <div class="site_content">
                    <!-- OnBoarding Screen slider -->
                    <div id="carouselExampleIndicators" class="carousel slide">
                    <div class="carousel-inner">
                    <div class="carousel-item">
                    ...
                    </div>
                    <div class="carousel-item">
                    ...
                    </div>
                    <div class="carousel-item">
                    ...
                    </div>
                    </div>
                    </div>
                    </div>
                    <!-- OnBoarding Screen Details End -->
                    <!-- Your All Scripts will be here ->
                    ...
                    </body>
                    </html>

Sign In Screen Structure

                    <!DOCTYPE html>
                    <html lang="zxx" dir="ltr">
                    <!-- All your metas will be here -->
                    <meta charset="UTF-8">
                    <meta http-equiv="X-UA-Compatible" content="IE=edge">
                    <meta name="viewport" content="width=device-width, initial-scale=1.0">
                    <head>
                    <!-- Your Stylesheets, Title -->
                    ...
                    </head>
                    <body>
                    <!-- Sign In Screen Details Start -->
                    <div class="site_content">
                    <!-- Prelaoder Section -->
                    <div class="loader-mask">
                    ...
                    </div>
                    <!-- All Content Section -->
                    <section id="sign-in-screen">
                    ...
                    </section>
                    </div>
                    <!-- Sign In Screen Details End -->
                    <!-- Your All Scripts will be here ->
                    ...
                    </body>
                    </html>

Sign Up Screen Structure

                    <!DOCTYPE html>
                    <html lang="zxx" dir="ltr">
                    <!-- All your metas will be here -->
                    <meta charset="UTF-8">
                    <meta http-equiv="X-UA-Compatible" content="IE=edge">
                    <meta name="viewport" content="width=device-width, initial-scale=1.0">
                    <head>
                    <!-- Your Stylesheets, Title -->
                    ...
                    </head>
                    <body>
                    <!-- Sign Up Screen Details Start -->
                    <div class="site_content">
                    <!-- Prelaoder Section -->
                    <div class="loader-mask">
                    ...
                    </div>
                    <!-- All Content Section -->
                    <section id="sign-up-screen">
                    ...
                    </section>
                    </div>
                    <!-- Sign Up Screen Details End -->
                    <!-- Your All Scripts will be here ->
                    ...
                    </body>
                    </html>

Forget Password Screen Structure

Forget Password Screen follows a simple coding structure. here is the sample:

                    <!DOCTYPE html>
                    <html lang="zxx" dir="ltr">
                    <!-- All your metas will be here -->
                    <meta charset="UTF-8">
                    <meta http-equiv="X-UA-Compatible" content="IE=edge">
                    <meta name="viewport" content="width=device-width, initial-scale=1.0">
                    <head>
                    <!-- Your Stylesheets, Title -->
                    ...
                    </head>
                    <body>
                    <!-- Forget Password Screen Details Start -->
                    <div class="site_content">
                    <!-- Prelaoder Section -->
                    <div class="loader-mask">
                    ...
                    </div>
                    <!-- Header Section -->
                    <header id="top-navbar" class="top-navbar">
                    ...
                    </header>
                    <!-- All Content Section -->
                    <section id="forget-screen-sec">
                    ...
                    </section>
                    </div>
                    <!-- Forget Password Screen Details End -->
                    <!-- Your All Scripts will be here ->
                    ...
                    </body>
                    </html>

Verify Screen Structure

Verify Screen follows a simple coding structure. here is the sample:

                    <!DOCTYPE html>
                    <html lang="zxx" dir="ltr">
                    <!-- All your metas will be here -->
                    <meta charset="UTF-8">
                    <meta http-equiv="X-UA-Compatible" content="IE=edge">
                    <meta name="viewport" content="width=device-width, initial-scale=1.0">
                    <head>
                    <!-- Your Stylesheets, Title -->
                    ...
                    </head>
                    <body>
                    <!-- Verify Screen Details Start -->
                    <div class="site_content">
                    <!-- Prelaoder Section -->
                    <div class="loader-mask">
                    ...
                    </div>
                    <!-- Header Section -->
                    <header id="top-navbar" class="top-navbar">
                    ...
                    </header>
                    <!-- All Content Section -->
                    <section id="verify-screen-sec">
                    ...
                    </section>
                    </div>
                    <!-- Verify Screen Details End -->
                    <!-- Your All Scripts will be here ->
                    ...
                    </body>
                    </html>

New Password Screen Structure

New Password Screen follows a simple coding structure. here is the sample:

                    <!DOCTYPE html>
                    <html lang="zxx" dir="ltr">
                    <!-- All your metas will be here -->
                    <meta charset="UTF-8">
                    <meta http-equiv="X-UA-Compatible" content="IE=edge">
                    <meta name="viewport" content="width=device-width, initial-scale=1.0">
                    <head>
                    <!-- Your Stylesheets, Title -->
                    ...
                    </head>
                    <body>
                    <!-- New Password Screen Details Start -->
                    <div class="site_content">
                    <!-- Prelaoder Section -->
                    <div class="loader-mask">
                    ...
                    </div>
                    <!-- Header Section -->
                    <header id="top-navbar" class="top-navbar">
                    ...
                    </header>
                    <!-- All Content Section -->
                    <section id="new-password-sec">
                    ...
                    </section>
                    </div>
                    <!-- Verify Screen Details End -->
                    <!-- Your All Scripts will be here ->
                    ...
                    </body>
                    </html>

Select Language Screen Structure

Select Language Screen follows a simple coding structure. here is the sample:

                    <!DOCTYPE html>
                    <html lang="zxx" dir="ltr">
                    <!-- All your metas will be here -->
                    <meta charset="UTF-8">
                    <meta http-equiv="X-UA-Compatible" content="IE=edge">
                    <meta name="viewport" content="width=device-width, initial-scale=1.0">
                    <head>
                    <!-- Your Stylesheets, Title -->
                    ...
                    </head>
                    <body>
                    <!-- Select Language Screen Details Start -->
                    <div class="site_content">
                    <!-- Prelaoder Section -->
                    <div class="loader-mask">
                    ...
                    </div>
                    <!-- Header Section -->
                    <header id="top-navbar" class="top-navbar">
                    ...
                    </header>
                    <!-- All Content Section -->
                    <section id="select-language-page">
                    ...
                    </section>
                    </div>
                    <!-- Select Language Screen Details End -->
                    <!-- Your All Scripts will be here ->
                    ...
                    </body>
                    </html>

Interest Screen Structure

Interest Screen follows a simple coding structure. here is the sample:

                    <!DOCTYPE html>
                    <html lang="zxx" dir="ltr">
                    <!-- All your metas will be here -->
                    <meta charset="UTF-8">
                    <meta http-equiv="X-UA-Compatible" content="IE=edge">
                    <meta name="viewport" content="width=device-width, initial-scale=1.0">
                    <head>
                    <!-- Your Stylesheets, Title -->
                    ...
                    </head>
                    <body>
                    <!-- Interest Screen Details Start -->
                    <div class="site_content">
                    <!-- Prelaoder Section -->
                    <div class="loader-mask">
                    ...
                    </div>
                    <!-- Header Section -->
                    <header id="top-navbar" class="top-navbar">
                    ...
                    </header>
                    <!-- All Content Section -->
                    <section id="interest-sec-page">
                    ...
                    </section>
                    </div>
                    <!-- Interest Screen Details End -->
                    <!-- Your All Scripts will be here ->
                    ...
                    </body>
                    </html>

Homepage1 Screen Structure

Homepage1 Screen follows a simple coding structure. here is the sample:

                    <!DOCTYPE html>
                    <html lang="zxx" dir="ltr">
                    <!-- All your metas will be here -->
                    <meta charset="UTF-8">
                    <meta http-equiv="X-UA-Compatible" content="IE=edge">
                    <meta name="viewport" content="width=device-width, initial-scale=1.0">
                    <head>
                    <!-- Your Stylesheets, Title -->
                    ...
                    </head>
                    <body>
                    <!-- Homepage1 Screen Details Start -->
                    <div class="site_content">
                    <!-- Prelaoder Section -->
                    <div class="loader-mask">
                    ...
                    </div>
                    <!-- Header Section -->
                    <header id="top-navbar" class="top-navbar">
                    ...
                    </header>
                    <!-- All Content Section -->
                    <section id="homepage1-sec">
                    ...
                    </section>
                    <!-- SideMenu Details -->
                    <div class="menu-sidebar details">
                    <div class="offcanvas offcanvas-start">
                    <div class="offcanvas-header">
                    ...
                    </div>
                    <div class="offcanvas-body">
                    ...
                    </div>
                    </div>
                    </div>
                    <!--  pwa install app popup start-->
                    <div class="offcanvas offcanvas-bottom addtohome-popup theme-offcanvas" id="offcanvas">
                    ...
                    </div>
                    <!-- Bottom Navigation Section -->
                    <div class="bottom-navigation">
                    ...
                    </div>
                    </div>
                    <!-- Homepage1 Screen Details End -->
                    <!-- Your All Scripts will be here ->
                    ...
                    </body>
                    </html>

Homepage2 Screen Structure

Homepage2 Screen follows a simple coding structure. here is the sample:

                    <!DOCTYPE html>
                    <html lang="zxx" dir="ltr">
                    <!-- All your metas will be here -->
                    <meta charset="UTF-8">
                    <meta http-equiv="X-UA-Compatible" content="IE=edge">
                    <meta name="viewport" content="width=device-width, initial-scale=1.0">
                    <head>
                    <!-- Your Stylesheets, Title -->
                    ...
                    </head>
                    <body>
                    <!-- Homepage2 Screen Details Start -->
                    <div class="site_content">
                    <!-- Prelaoder Section -->
                    <div class="loader-mask">
                    ...
                    </div>
                    <!-- Header Section -->
                    <header id="top-navbar" class="top-navbar">
                    ...
                    </header>
                    <!-- All Content Section -->
                    <section id="homepage2-sec">
                    ...
                    </section>
                    <!-- SideMenu Details -->
                    <div class="menu-sidebar details">
                    <div class="offcanvas offcanvas-start">
                    <div class="offcanvas-header">
                    ...
                    </div>
                    <div class="offcanvas-body">
                    ...
                    </div>
                    </div>
                    </div>
                    <!-- Bottom Navigation Section -->
                    <div class="bottom-navigation">
                    ...
                    </div>
                    </div>
                    <!-- Homepage2 Screen Details End -->
                    <!-- Your All Scripts will be here ->
                    ...
                    </body>
                    </html>

Category Screen Structure

Category Screen follows a simple coding structure. here is the sample:

                    <!DOCTYPE html>
                    <html lang="zxx" dir="ltr">
                    <!-- All your metas will be here -->
                    <meta charset="UTF-8">
                    <meta http-equiv="X-UA-Compatible" content="IE=edge">
                    <meta name="viewport" content="width=device-width, initial-scale=1.0">
                    <head>
                    <!-- Your Stylesheets, Title -->
                    ...
                    </head>
                    <body>
                    <!-- Category Screen Details Start -->
                    <div class="site_content">
                    <!-- Prelaoder Section -->
                    <div class="loader-mask">
                    ...
                    </div>
                    <!-- Header Section -->
                    <header id="top-navbar" class="top-navbar">
                    ...
                    </header>
                    <!-- All Content Section -->
                    <section id="category-page-sec">
                    ...
                    </section>
                    </div>
                    <!-- Category Screen Details End -->
                    <!-- Your All Scripts will be here ->
                    ...
                    </body>
                    </html>

Single Category Screen Structure

Single Category Screen follows a simple coding structure. here is the sample:

                    <!DOCTYPE html>
                    <html lang="zxx" dir="ltr">
                    <!-- All your metas will be here -->
                    <meta charset="UTF-8">
                    <meta http-equiv="X-UA-Compatible" content="IE=edge">
                    <meta name="viewport" content="width=device-width, initial-scale=1.0">
                    <head>
                    <!-- Your Stylesheets, Title -->
                    ...
                    </head>
                    <body>
                    <!-- Single Category Screen Details Start -->
                    <div class="site_content">
                    <!-- Prelaoder Section -->
                    <div class="loader-mask">
                    ...
                    </div>
                    <!-- Header Section -->
                    <header id="top-navbar" class="top-navbar">
                    ...
                    </header>
                    <!-- All Content Section -->
                    <section id="single-category-page">
                    ...
                    </section>
                    </div>
                    <!-- Single Category Screen Details End -->
                    <!-- Your All Scripts will be here ->
                    ...
                    </body>
                    </html>

Search Page Screen Structure

Search Page Screen follows a simple coding structure. here is the sample:

                    <!DOCTYPE html>
                    <html lang="zxx" dir="ltr">
                    <!-- All your metas will be here -->
                    <meta charset="UTF-8">
                    <meta http-equiv="X-UA-Compatible" content="IE=edge">
                    <meta name="viewport" content="width=device-width, initial-scale=1.0">
                    <head>
                    <!-- Your Stylesheets, Title -->
                    ...
                    </head>
                    <body>
                    <!-- Search Page Screen Details Start -->
                    <div class="site_content">
                    <!-- Prelaoder Section -->
                    <div class="loader-mask">
                    ...
                    </div>
                    <!-- Header Section -->
                    <header id="top-navbar" class="top-navbar">
                    ...
                    </header>
                    <!-- All Content Section -->
                    <section id="search-page-sec">
                    ...
                    </section>
                    </div>
                    <!-- Search Page Screen Details End -->
                    <!-- Your All Scripts will be here ->
                    ...
                    </body>
                    </html>

Filter Page Screen Structure

Filter Page Screen follows a simple coding structure. here is the sample:

                    <!DOCTYPE html>
                    <html lang="zxx" dir="ltr">
                    <!-- All your metas will be here -->
                    <meta charset="UTF-8">
                    <meta http-equiv="X-UA-Compatible" content="IE=edge">
                    <meta name="viewport" content="width=device-width, initial-scale=1.0">
                    <head>
                    <!-- Your Stylesheets, Title -->
                    ...
                    </head>
                    <body>
                    <!-- Filter Page Screen Details Start -->
                    <div class="site_content">
                    <!-- Prelaoder Section -->
                    <div class="loader-mask">
                    ...
                    </div>
                    <!-- Header Section -->
                    <header id="top-navbar" class="top-navbar">
                    ...
                    </header>
                    <!-- All Content Section -->
                    <section id="filter-page">
                    ...
                    </section>
                    </div>
                    <!-- Filter Page Screen Details End -->
                    <!-- Your All Scripts will be here ->
                    ...
                    </body>
                    </html>

Single Prodcut Page Screen Structure

Single Prodcut Page Screen follows a simple coding structure. here is the sample:

                    <!DOCTYPE html>
                    <html lang="zxx" dir="ltr">
                    <!-- All your metas will be here -->
                    <meta charset="UTF-8">
                    <meta http-equiv="X-UA-Compatible" content="IE=edge">
                    <meta name="viewport" content="width=device-width, initial-scale=1.0">
                    <head>
                    <!-- Your Stylesheets, Title -->
                    ...
                    </head>
                    <body>
                    <!-- Single Prodcut Page Screen Details Start -->
                    <div class="site_content">
                    <!-- Prelaoder Section -->
                    <div class="loader-mask">
                    ...
                    </div>
                    <!-- Header Section -->
                    <header id="top-navbar" class="top-navbar">
                    ...
                    </header>
                    <!-- All Content Section -->
                    <section id="single-prduct-page">
                    ...
                    </section>
                     <!-- Product Video Modal -->
                    <div id="product-video-modal" class="modal" >
                    ...
                    </div>
                    </div>
                    <!-- Single Prodcut Page Screen Details End -->
                    <!-- Your All Scripts will be here ->
                    ...
                    </body>
                    </html>

Single Prodcut Page2 Screen Structure

Single Prodcut Page2 Screen follows a simple coding structure. here is the sample:

                    <!DOCTYPE html>
                    <html lang="zxx" dir="ltr">
                    <!-- All your metas will be here -->
                    <meta charset="UTF-8">
                    <meta http-equiv="X-UA-Compatible" content="IE=edge">
                    <meta name="viewport" content="width=device-width, initial-scale=1.0">
                    <head>
                    <!-- Your Stylesheets, Title -->
                    ...
                    </head>
                    <body>
                    <!-- Single Prodcut Page2 Screen Details Start -->
                    <div class="site_content">
                    <!-- Prelaoder Section -->
                    <div class="loader-mask">
                    ...
                    </div>
                    <!-- Header Section -->
                    <header id="top-navbar" class="top-navbar">
                    ...
                    </header>
                    <!-- All Content Section -->
                    <section id="product-page2-sec">
                    ...
                    </section>
                    </div>
                    <!-- Single Prodcut Page2 Screen Details End -->
                    <!-- Your All Scripts will be here ->
                    ...
                    </body>
                    </html>

Shopping Cart Screen Structure

Shopping Cart Screen follows a simple coding structure. here is the sample:

                    <!DOCTYPE html>
                    <html lang="zxx" dir="ltr">
                    <!-- All your metas will be here -->
                    <meta charset="UTF-8">
                    <meta http-equiv="X-UA-Compatible" content="IE=edge">
                    <meta name="viewport" content="width=device-width, initial-scale=1.0">
                    <head>
                    <!-- Your Stylesheets, Title -->
                    ...
                    </head>
                    <body>
                    <!-- Shopping Cart Screen Details Start -->
                    <div class="site_content">
                    <!-- Prelaoder Section -->
                    <div class="loader-mask">
                    ...
                    </div>
                    <!-- Header Section -->
                    <header id="top-navbar" class="top-navbar">
                    ...
                    </header>
                    <!-- All Content Section -->
                    <section id="shopping-page">
                    ...
                    </section>
                    </div>
                    <!-- Shopping Cart Screen Details End -->
                    <!-- Your All Scripts will be here ->
                    ...
                    </body>
                    </html>

Checkout Screen Structure

Checkout Screen follows a simple coding structure. here is the sample:

                    <!DOCTYPE html>
                    <html lang="zxx" dir="ltr">
                    <!-- All your metas will be here -->
                    <meta charset="UTF-8">
                    <meta http-equiv="X-UA-Compatible" content="IE=edge">
                    <meta name="viewport" content="width=device-width, initial-scale=1.0">
                    <head>
                    <!-- Your Stylesheets, Title -->
                    ...
                    </head>
                    <body>
                    <!-- Checkout Screen Details Start -->
                    <div class="site_content">
                    <!-- Prelaoder Section -->
                    <div class="loader-mask">
                    ...
                    </div>
                    <!-- Header Section -->
                    <header id="top-navbar" class="top-navbar">
                    ...
                    </header>
                    <!-- All Content Section -->
                    <section id="checkout-page">
                    ...
                    </section>
                    </div>
                    <!-- Checkout Screen Details End -->
                    <!-- Your All Scripts will be here ->
                    ...
                    </body>
                    </html>

Paypal Screen Structure

Paypal Screen follows a simple coding structure. here is the sample:

                    <!DOCTYPE html>
                    <html lang="zxx" dir="ltr">
                    <!-- All your metas will be here -->
                    <meta charset="UTF-8">
                    <meta http-equiv="X-UA-Compatible" content="IE=edge">
                    <meta name="viewport" content="width=device-width, initial-scale=1.0">
                    <head>
                    <!-- Your Stylesheets, Title -->
                    ...
                    </head>
                    <body>
                    <!-- Paypal Screen Details Start -->
                    <div class="site_content">
                    <!-- Prelaoder Section -->
                    <div class="loader-mask">
                    ...
                    </div>
                    <!-- Header Section -->
                    <header id="top-navbar" class="top-navbar">
                    ...
                    </header>
                    <!-- All Content Section -->
                    <form id="payment-form-deatils">
                    ...
                    </form>
                    </div>
                    <!-- Paypal Screen Details End -->
                    <!-- Your All Scripts will be here ->
                    ...
                    </body>
                    </html>

Payment Success Screen Structure

Payment Success Screen follows a simple coding structure. here is the sample:

                    <!DOCTYPE html>
                    <html lang="zxx" dir="ltr">
                    <!-- All your metas will be here -->
                    <meta charset="UTF-8">
                    <meta http-equiv="X-UA-Compatible" content="IE=edge">
                    <meta name="viewport" content="width=device-width, initial-scale=1.0">
                    <head>
                    <!-- Your Stylesheets, Title -->
                    ...
                    </head>
                    <body>
                    <!-- Payment Success Screen Details Start -->
                    <div class="site_content">
                    <!-- Prelaoder Section -->
                    <div class="loader-mask">
                    ...
                    </div>
                    <!-- All Content Section -->
                    <section id="payment-success-first">
                    ...
                    </section>
                    </div>
                    <!-- Payment Success Details End -->
                    <!-- Your All Scripts will be here ->
                    ...
                    </body>
                    </html>

Track Order Screen Structure

Track Order Screen follows a simple coding structure. here is the sample:

                    <!DOCTYPE html>
                    <html lang="zxx" dir="ltr">
                    <!-- All your metas will be here -->
                    <meta charset="UTF-8">
                    <meta http-equiv="X-UA-Compatible" content="IE=edge">
                    <meta name="viewport" content="width=device-width, initial-scale=1.0">
                    <head>
                    <!-- Your Stylesheets, Title -->
                    ...
                    </head>
                    <body>
                    <!-- Track Order Screen Details Start -->
                    <div class="site_content">
                    <!-- Prelaoder Section -->
                    <div class="loader-mask">
                    ...
                    </div>
                    <!-- Header Section -->
                    <header id="top-navbar" class="top-navbar">
                    ...
                    </header>
                    <!-- All Content Section -->
                    <section id="track-order-page" >
                    ...
                    </section>
                    </div>
                    <!-- Track Order Details End -->
                    <!-- Your All Scripts will be here ->
                    ...
                    </body>
                    </html>

Product Rate Screen Structure

Product Rate Screen follows a simple coding structure. here is the sample:

                    <!DOCTYPE html>
                    <html lang="zxx" dir="ltr">
                    <!-- All your metas will be here -->
                    <meta charset="UTF-8">
                    <meta http-equiv="X-UA-Compatible" content="IE=edge">
                    <meta name="viewport" content="width=device-width, initial-scale=1.0">
                    <head>
                    <!-- Your Stylesheets, Title -->
                    ...
                    </head>
                    <body>
                    <!-- Product Rate Screen Details Start -->
                    <div class="site_content">
                    <!-- Prelaoder Section -->
                    <div class="loader-mask">
                    ...
                    </div>
                    <!-- Header Section -->
                    <header id="top-navbar" class="top-navbar">
                    ...
                    </header>
                    <!-- All Content Section -->
                    <section id="product-rate-page" >
                    ...
                    </section>
                    </div>
                    <!-- Product Rate Details End -->
                    <!-- Your All Scripts will be here ->
                    ...
                    </body>
                    </html>

Reviews Screen Structure

Reviews Screen follows a simple coding structure. here is the sample:

                    <!DOCTYPE html>
                    <html lang="zxx" dir="ltr">
                    <!-- All your metas will be here -->
                    <meta charset="UTF-8">
                    <meta http-equiv="X-UA-Compatible" content="IE=edge">
                    <meta name="viewport" content="width=device-width, initial-scale=1.0">
                    <head>
                    <!-- Your Stylesheets, Title -->
                    ...
                    </head>
                    <body>
                    <!-- Reviews Screen Details Start -->
                    <div class="site_content">
                    <!-- Prelaoder Section -->
                    <div class="loader-mask">
                    ...
                    </div>
                    <!-- Header Section -->
                    <header id="top-navbar" class="top-navbar">
                    ...
                    </header>
                    <!-- All Content Section -->
                    <section id="review-sec-page1" >
                    ...
                    </section>
                    <!-- Review Video Modal -->
                    <div id="review-video-modal" class="modal" >
                    ...
                    </div>
                    </div>
                    <!-- Reviews Details End -->
                    <!-- Your All Scripts will be here ->
                    ...
                    </body>
                    </html>

Parterner Page Screen Structure

Parterner Page Screen follows a simple coding structure. here is the sample:

                    <!DOCTYPE html>
                    <html lang="zxx" dir="ltr">
                    <!-- All your metas will be here -->
                    <meta charset="UTF-8">
                    <meta http-equiv="X-UA-Compatible" content="IE=edge">
                    <meta name="viewport" content="width=device-width, initial-scale=1.0">
                    <head>
                    <!-- Your Stylesheets, Title -->
                    ...
                    </head>
                    <body>
                    <!-- Parterner Page Screen Details Start -->
                    <div class="site_content">
                    <!-- Prelaoder Section -->
                    <div class="loader-mask">
                    ...
                    </div>
                    <!-- Header Section -->
                    <header id="top-navbar" class="top-navbar">
                    ...
                    </header>
                    <!-- All Content Section -->
                    <section id="partner-page" >
                    ...
                    </section>
                    </div>
                    <!-- Parterner Page Details End -->
                    <!-- Your All Scripts will be here ->
                    ...
                    </body>
                    </html>

Tranding Page Screen Structure

Tranding Page Screen follows a simple coding structure. here is the sample:

                    <!DOCTYPE html>
                    <html lang="zxx" dir="ltr">
                    <!-- All your metas will be here -->
                    <meta charset="UTF-8">
                    <meta http-equiv="X-UA-Compatible" content="IE=edge">
                    <meta name="viewport" content="width=device-width, initial-scale=1.0">
                    <head>
                    <!-- Your Stylesheets, Title -->
                    ...
                    </head>
                    <body>
                    <!-- Tranding Page Screen Details Start -->
                    <div class="site_content">
                    <!-- Prelaoder Section -->
                    <div class="loader-mask">
                    ...
                    </div>
                    <!-- Header Section -->
                    <header id="top-navbar" class="top-navbar">
                    ...
                    </header>
                    <!-- All Content Section -->
                    <section id="tranding-page" >
                    ...
                    </section>
                    </div>
                    <!-- Tranding Page Details End -->
                    <!-- Your All Scripts will be here ->
                    ...
                    </body>
                    </html>

Favourite Page Screen Structure

Favourite Page Screen follows a simple coding structure. here is the sample:

                    <!DOCTYPE html>
                    <html lang="zxx" dir="ltr">
                    <!-- All your metas will be here -->
                    <meta charset="UTF-8">
                    <meta http-equiv="X-UA-Compatible" content="IE=edge">
                    <meta name="viewport" content="width=device-width, initial-scale=1.0">
                    <head>
                    <!-- Your Stylesheets, Title -->
                    ...
                    </head>
                    <body>
                    <!-- Favourite Page Screen Details Start -->
                    <div class="site_content">
                    <!-- Prelaoder Section -->
                    <div class="loader-mask">
                    ...
                    </div>
                    <!-- Header Section -->
                    <header id="top-navbar" class="top-navbar">
                    ...
                    </header>
                    <!-- All Content Section -->
                    <section id="favourite-page">
                    ...
                    </section>
                    <!-- SideMenu Details -->
                    <div class="menu-sidebar details">
                    <div class="offcanvas offcanvas-start">
                    <div class="offcanvas-header">
                    ...
                    </div>
                    <div class="offcanvas-body">
                    ...
                    </div>
                    </div>
                    </div>
                    <!-- Bottom Navigation Section -->
                    <div class="bottom-navigation">
                    ...
                    </div>
                    </div>
                    <!-- Favourite Screen Details End -->
                    <!-- Your All Scripts will be here ->
                    ...
                    </body>
                    </html>

Notification Screen Structure

Notification Screen follows a simple coding structure. here is the sample:

                    <!DOCTYPE html>
                    <html lang="zxx" dir="ltr">
                    <!-- All your metas will be here -->
                    <meta charset="UTF-8">
                    <meta http-equiv="X-UA-Compatible" content="IE=edge">
                    <meta name="viewport" content="width=device-width, initial-scale=1.0">
                    <head>
                    <!-- Your Stylesheets, Title -->
                    ...
                    </head>
                    <body>
                    <!-- Notification Screen Details Start -->
                    <div class="site_content">
                    <!-- Prelaoder Section -->
                    <div class="loader-mask">
                    ...
                    </div>
                    <!-- Header Section -->
                    <header id="top-navbar" class="top-navbar">
                    ...
                    </header>
                    <!-- All Content Section -->
                    <section id="notification-page">
                    ...
                    </section>
                    <!-- SideMenu Details -->
                    <div class="menu-sidebar details">
                    <div class="offcanvas offcanvas-start">
                    <div class="offcanvas-header">
                    ...
                    </div>
                    <div class="offcanvas-body">
                    ...
                    </div>
                    </div>
                    </div>
                    <!-- Bottom Navigation Section -->
                    <div class="bottom-navigation">
                    ...
                    </div>
                    </div>
                    <!-- Notification Screen Details End -->
                    <!-- Your All Scripts will be here ->
                    ...
                    </body>
                    </html>

Profile Screen Structure

Profile Screen follows a simple coding structure. here is the sample:

                    <!DOCTYPE html>
                    <html lang="zxx" dir="ltr">
                    <!-- All your metas will be here -->
                    <meta charset="UTF-8">
                    <meta http-equiv="X-UA-Compatible" content="IE=edge">
                    <meta name="viewport" content="width=device-width, initial-scale=1.0">
                    <head>
                    <!-- Your Stylesheets, Title -->
                    ...
                    </head>
                    <body>
                    <!-- Profile Screen Details Start -->
                    <div class="site_content">
                    <!-- Prelaoder Section -->
                    <div class="loader-mask">
                    ...
                    </div>
                    <!-- Header Section -->
                    <header id="top-navbar" class="top-navbar">
                    ...
                    </header>
                    <!-- All Content Section -->
                    <section id="profile-page-sec">
                    ...
                    </section>
                    <!-- SideMenu Details -->
                    <div class="menu-sidebar details">
                    <div class="offcanvas offcanvas-start">
                    <div class="offcanvas-header">
                    ...
                    </div>
                    <div class="offcanvas-body">
                    ...
                    </div>
                    </div>
                    </div>
                    <!-- Bottom Navigation Section -->
                    <div class="bottom-navigation">
                    ...
                    </div>
                    </div>
                    <!-- Profile Screen Details End -->
                    <!-- Your All Scripts will be here ->
                    ...
                    </body>
                    </html>

Wallet Screen Structure

Wallet Screen follows a simple coding structure. here is the sample:

                    <!DOCTYPE html>
                    <html lang="zxx" dir="ltr">
                    <!-- All your metas will be here -->
                    <meta charset="UTF-8">
                    <meta http-equiv="X-UA-Compatible" content="IE=edge">
                    <meta name="viewport" content="width=device-width, initial-scale=1.0">
                    <head>
                    <!-- Your Stylesheets, Title -->
                    ...
                    </head>
                    <body>
                    <!-- Wallet Screen Details Start -->
                    <div class="site_content">
                    <!-- Prelaoder Section -->
                    <div class="loader-mask">
                    ...
                    </div>
                    <!-- Header Section -->
                    <header id="top-navbar" class="top-navbar">
                    ...
                    </header>
                    <!-- All Content Section -->
                    <section id="wallet-page-sec">
                    ...
                    </section>
                    </div>
                    <!-- Wallet Screen Details End -->
                    <!-- Your All Scripts will be here ->
                    ...
                    </body>
                    </html>

App Setting Screen Structure

App Setting Screen follows a simple coding structure. here is the sample:

                    <!DOCTYPE html>
                    <html lang="zxx" dir="ltr">
                    <!-- All your metas will be here -->
                    <meta charset="UTF-8">
                    <meta http-equiv="X-UA-Compatible" content="IE=edge">
                    <meta name="viewport" content="width=device-width, initial-scale=1.0">
                    <head>
                    <!-- Your Stylesheets, Title -->
                    ...
                    </head>
                    <body>
                    <!-- App Setting Screen Details Start -->
                    <div class="site_content">
                    <!-- Prelaoder Section -->
                    <div class="loader-mask">
                    ...
                    </div>
                    <!-- Header Section -->
                    <header id="top-navbar" class="top-navbar">
                    ...
                    </header>
                    <!-- All Content Section -->
                    <section id="app-setting-page">
                    ...
                    </section>
                    </div>
                    <!-- App Setting Screen Details End -->
                    <!-- Your All Scripts will be here ->
                    ...
                    </body>
                    </html>

Currency Screen Structure

Currency Screen follows a simple coding structure. here is the sample:

                    <!DOCTYPE html>
                    <html lang="zxx" dir="ltr">
                    <!-- All your metas will be here -->
                    <meta charset="UTF-8">
                    <meta http-equiv="X-UA-Compatible" content="IE=edge">
                    <meta name="viewport" content="width=device-width, initial-scale=1.0">
                    <head>
                    <!-- Your Stylesheets, Title -->
                    ...
                    </head>
                    <body>
                    <!-- Currency Screen Details Start -->
                    <div class="site_content">
                    <!-- Prelaoder Section -->
                    <div class="loader-mask">
                    ...
                    </div>
                    <!-- Header Section -->
                    <header id="top-navbar" class="top-navbar">
                    ...
                    </header>
                    <!-- All Content Section -->
                    <section id="currency-sec">
                    ...
                    </section>
                    </div>
                    <!-- Currency Screen Details End -->
                    <!-- Your All Scripts will be here ->
                    ...
                    </body>
                    </html>

Change Language Screen Structure

Change Language Screen follows a simple coding structure. here is the sample:

                    <!DOCTYPE html>
                    <html lang="zxx" dir="ltr">
                    <!-- All your metas will be here -->
                    <meta charset="UTF-8">
                    <meta http-equiv="X-UA-Compatible" content="IE=edge">
                    <meta name="viewport" content="width=device-width, initial-scale=1.0">
                    <head>
                    <!-- Your Stylesheets, Title -->
                    ...
                    </head>
                    <body>
                    <!-- Change Language Screen Details Start -->
                    <div class="site_content">
                    <!-- Prelaoder Section -->
                    <div class="loader-mask">
                    ...
                    </div>
                    <!-- Header Section -->
                    <header id="top-navbar" class="top-navbar">
                    ...
                    </header>
                    <!-- All Content Section -->
                    <section id="change-language-page">
                    ...
                    </section>
                    </div>
                    <!-- Change Language Screen Details End -->
                    <!-- Your All Scripts will be here ->
                    ...
                    </body>
                    </html>

About Us Screen Structure

About Us Screen follows a simple coding structure. here is the sample:

                    <!DOCTYPE html>
                    <html lang="zxx" dir="ltr">
                    <!-- All your metas will be here -->
                    <meta charset="UTF-8">
                    <meta http-equiv="X-UA-Compatible" content="IE=edge">
                    <meta name="viewport" content="width=device-width, initial-scale=1.0">
                    <head>
                    <!-- Your Stylesheets, Title -->
                    ...
                    </head>
                    <body>
                    <!-- About Us Screen Details Start -->
                    <div class="site_content">
                    <!-- Prelaoder Section -->
                    <div class="loader-mask">
                    ...
                    </div>
                    <!-- Header Section -->
                    <header id="top-navbar" class="top-navbar">
                    ...
                    </header>
                    <!-- All Content Section -->
                    <section id="about-deatils">
                    ...
                    </section>
                    </div>
                    <!-- About Us Screen Details End -->
                    <!-- Your All Scripts will be here ->
                    ...
                    </body>
                    </html>

Term&Services Screen Structure

Term&Services follows a simple coding structure. here is the sample:

                    <!DOCTYPE html>
                    <html lang="zxx" dir="ltr">
                    <!-- All your metas will be here -->
                    <meta charset="UTF-8">
                    <meta http-equiv="X-UA-Compatible" content="IE=edge">
                    <meta name="viewport" content="width=device-width, initial-scale=1.0">
                    <head>
                    <!-- Your Stylesheets, Title -->
                    ...
                    </head>
                    <body>
                    <!-- Term&Services Screen Details Start -->
                    <div class="site_content">
                    <!-- Prelaoder Section -->
                    <div class="loader-mask">
                    ...
                    </div>
                    <!-- Header Section -->
                    <header id="top-navbar" class="top-navbar">
                    ...
                    </header>
                    <!-- All Content Section -->
                    <section id="term-services-deatils">
                    ...
                    </section>
                    </div>
                    <!-- Term&Services Details End -->
                    <!-- Your All Scripts will be here ->
                    ...
                    </body>
                    </html>

FAQ Screen Structure

FAQ Screen follows a simple coding structure. here is the sample:

                    <!DOCTYPE html>
                    <html lang="zxx" dir="ltr">
                    <!-- All your metas will be here -->
                    <meta charset="UTF-8">
                    <meta http-equiv="X-UA-Compatible" content="IE=edge">
                    <meta name="viewport" content="width=device-width, initial-scale=1.0">
                    <head>
                    <!-- Your Stylesheets, Title -->
                    ...
                    </head>
                    <body>
                    <!-- FAQ Screen Details Start -->
                    <div class="site_content">
                    <!-- Prelaoder Section -->
                    <div class="loader-mask">
                    ...
                    </div>
                    <!-- Header Section -->
                    <Header id="top-navbar" class="top-navbar">
                    ...
                    </header>
                    <!-- All Content Section -->
                    <section id="faq-sec">
                    ...
                    </section>
                    </div>
                    <!-- FAQ Screen Details End -->
                    <!-- Your All Scripts will be here ->
                    ...
                    </body>
                    </html>

Favicons

You can add a Favicon to your Website using the following code just bottom to the Stylesheet files links:

<link href="assets/images/favicon/icon.png" rel="icon">

Logo Settings

The Logo Container can be found in the - index.htmlfile

<div class="logo_sec"><a href="javascript:void(0)"><img src="assets/images/splashscreen/logo.png" alt="logo"></a></div>

Changing Fonts

Change your Fonts from Google Fonts Library directly if you plan to use a Google Font. You can find the Linking to the Font Files in the head tag

<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">

Website Optimization Tips

A Fast & Optimized Website has several factors which needs to be implemented in order to achieve the desired results. There are several Optimization Techniques available which will definitely affect your Website's Performance in a Positive Way & we want to share a few of them with you:

Image Compression & Optimization

We tend to use Lots of Images on our Websites but we often do not make efforts to Compress & Optimize them. Remember, the Larger the Image, the more time it takes to download and therefore this slows your website loading times affecting User Experience. Your customer will leave your website if it does not load within 3-5 Seconds which adversely affects your Sales. Therefore, it is important to Resize, Optimize & Compress your Images before using it on your Website. Here are some Tips which might come handy in optimizing images:
- Resize your Images: Resize your Images before using it on your Website. Do not just Download an Image & place it as it is in your Website's <img> Tag without resizing it. The size/resolution of the Image matters since it is not recommended to use an Image size of 1200px x 800px in a Content Size of 300px x 200px as this is unnecessary. Resize it to 300px x 200px
- Image Formats: There are three common file types that are used for web images which are JPEG, GIF, & PNG. For images with a Flat Background use JPEG images, for images with a Transparent background use PNG images and for images with Animations use GIF images.
- Compressing Images: Images Compression is important as it considerably reduces the size without losing the quality. There are several FREE Image Optimization Tools available to Download.
  For MAC use ImageOptim
  For Windows use Riot for compressing JPEG Images & PNG Gauntlet for PNG Images.
CSS & jQuery Minifications

It is also recommended that you Combine & Minify all your CSS Files to a single CSS File & all Javascript Files to a single JS File since Minification reduces the size of the File and Combining the files helps in reducing the number of HTTP requests made to the server. This is also an Important Factor in increasing the speed of your website. There are several tools available online to Minify your CSS & JS Files. Our recommendations are:
For CSS use CSS Minifier and For Javascript use Javascript Minifier.
Fast Web Hosting Servers

A lot depends on your Web Hosting Servers, so it is recommended that you choose a Hosting Company/Server that provides a Reliable & a Fast Hosting Service. You can check out some recommended Hosting Services here: http://themeforest.net/get_hosting.

Header

You can choose the headers while creating your Pages. Default Header with a Transparent Background while turns Stickey after a little scrolling &,you can make header without stickey effect for this just remove the .fixed from the header tag. Simply follow the structure below to create the header:

                          <!-- Header Start -->
                          <header id="top-navbar" class="top-navbar fixed">
                          <div class="container">
                          ...
                          </div>
                          </header>
                          <!-- Header End -->

Bottom Navigation Menu Structure

If you want to edit the menu from the bottom navigation menu, for that you have to visit the home-page there you can easily find out the code for the bottom navigation menu. You may also discover the bottom navigation menu in notification page ,profile page and many more respectively.

                          <!-- Bottom Navigation Menu start here -->
                          <div class="bottom-panel nagivation-menu-wrap">
                          <ul class="sc-bottom-bar furniture-bottom-nav" id="furniture_navbar">
                          <li class="nav-menu-icon">
                          ...
                          </li>
                          <li class="nav-menu-icon">
                          ...
                          </li>
                          </ul>
                          </div>
                          <!-- Bottom Navigation menu end here -->

Components

Bootstrape Slider Structure

Brookwood refer a simple Bootstrape Slider structure.

                        <!-- Slider Structure -->
                        <div id="carouselExampleIndicators" class="carousel slide">
                        <div class="carousel-inner">
                        <div class="carousel-item">
                        ...
                        </div>
                        <div class="carousel-item">
                        ...
                        </div>
                        </div>
                        </div>

Bootstrape Accordian Structure

Brookwood refer a simple Bootstrape Accordian structure.

                        <!-- Slider Structure -->
                        <div id="accordionPanelsStayOpenExample" class="accordion custom-acc">
                        <div class="accordion-item">
                        ...
                        </div>
                        <div class="accordion-item">
                        ...
                        </div>
                        </div>

Bootstrape TabBar Structure

Brookwood refer a simple Bootstrape TabBar structure.

                        <!-- TabBar Structure -->
                        <div class="searchpage-second-sec">
                        <ul class="nav nav-pills search-tab" id="pills-tab">

                        <li class="nav-item">
                        <button class="nav-link search-btn" id="chair-tab" data-bs-toggle="pill" data-bs-target="#pills-chair">
                        ...
                        </button>
                        </li>

                        <li class="nav-item">
                        <button class="nav-link search-btn" id="table-tab" data-bs-toggle="pill" data-bs-target="#pills-table">
                        ...
                        </button>
                        </li>

                        </ul>
                        </div>

                        <div class="tab-content" id="pills-furnitureContent">
                        <div class="tab-pane" id="pills-chair" >
                        ...
                        </div>
                        <div class="tab-pane" id="pills-table" >
                        ...
                        </div>
                        </div>

Columns & Grid

Bootstrap Grid

.col-md-1

.col-md-2

.col-md-3

.col-md-4

.col-md-5

.col-md-2

.col-md-6

.col-md-1

.col-md-11

.col-md-2

.col-md-10

.col-md-3

.col-md-9

.col-md-4

.col-md-8

.col-md-5

.col-md-7

Helper Classes

We have created some really useful helper classes for you. Here are a few of them:

position-relative & h-100 & w-100 - Width, height, position helper
d-none & d-block & d-flex - Display helper
text-left & text-center & text-right - Text align helper
justify-content-center & justify-content-start & justify-content-end & justify-content-between & align-items-start & align-items-center & align-items-end & flex-column & flex-wrap & flex-1 - Flex helper
overflow-hidden - Overflow helper
text-uppercase & text-capitalize & text-normal - Text transform helper

Slider Types & their Options

Brookwood includes Sliders are mentioned as follows:

Slick slider
You can find the slick slider-related Documentation here.
Slick Sliders Docs

Bootstrape Carousel
You can find the Bootstrape carousel related Documentation here.
Bootstrape Docs

Introduction

Brookwood boasts of a many handy features which are quite powerful, flexible, functional & easy to use. you can do changes in features very easily. Here is the List of features that uses in this website:

Sections
Container
Columns
Row
Animations
Slick Slider
Bootstrape Carousels
Font Awesome 6 Icons
Buttons
Search Bar
Header
Counter
Track Order Design
Counter Design
Switch
Video Design with play
FAQ
Navbar
Otp Section
Google Map Included
Tabbar
Payment Method
Responsive Design

Each of the above mentioned features are easily extendable, flexible & easy to use. You can find the sample codes from stylesheet. We are explaining a few of them for your Reference.

Animations

Scroll to reveal Animations are latest in the Trends. You can do them too with Bistro. You can use animations on any element you want. Here is the Sample Code:

                         .fixed {
                          animation: fixedheader 600ms ease 0ms 1 forwards;
                        }

                        @keyframes fixedheader {
                          from {
                            transform: translateY(-100%);
                          } 
                          to {
                            transform: translateY(0);
                          } 
                        }

<div class="" data-aos="zoom-in" ></div>

You can also use delays for your Animations:

<div class="" data-aos-duration="3000" data-aos-delay="300"></div>

Note: Delay Duration is in milliseconds.

Here is the list of the Animation Types you can use:

bounce
flash
pulse
rubberBand
shake
swing
tada
wobble
bounceIn
bounceInDown
bounceInLeft
bounceInRight
bounceInUp
bounceOut
bounceOutDown
bounceOutLeft
bounceOutRight
bounceOutUp
fadeIn
fadeInDown
fadeInDownBig
fadeInLeft
fadeInLeftBig
fadeInRight
fadeInRightBig
fadeInUp
fadeInUpBig
fadeOut
fadeOutDown
fadeOutDownBig
fadeOutLeft
fadeOutLeftBig
fadeOutRight
fadeOutRightBig
fadeOutUp
fadeOutUpBig
flip
flipInX
flipInY
flipOutX
flipOutY
lightSpeedIn
lightSpeedOut
rotateIn
rotateInDownLeft
rotateInDownRight
rotateInUpLeft
rotateInUpRight
rotateOut
rotateOutDownLeft
rotateOutDownRight
rotateOutUpLeft
rotateOutUpRight
hinge
rollIn
rollOut
zoomIn
zoomInDown
zoomInLeft
zoomInRight
zoomInUp
zoomOut
zoomOutDown
zoomOutLeft
zoomOutRight
zoomOutUp

Icons

Font Awesome 6

Images

jQuery

CSS & Fonts

style.css- use style css
media-query.css- responsive media query css
Bootstrap 5
Font awesome 6 Icons
Slick Slider
Google Fonts
1. Poppins
2. Inter

Installation

HTML Structure

Index Screen Structure

OnBoarding Screen Structure

Sign In Screen Structure

Sign Up Screen Structure

Forget Password Screen Structure

Verify Screen Structure

New Password Screen Structure

Select Language Screen Structure

Interest Screen Structure

Homepage1 Screen Structure

Homepage2 Screen Structure

Category Screen Structure

Single Category Screen Structure

Search Page Screen Structure

Filter Page Screen Structure

Single Prodcut Page Screen Structure

Single Prodcut Page2 Screen Structure

Shopping Cart Screen Structure

Checkout Screen Structure

Paypal Screen Structure

Payment Success Screen Structure

Track Order Screen Structure

Product Rate Screen Structure

Reviews Screen Structure

Parterner Page Screen Structure

Tranding Page Screen Structure

Favourite Page Screen Structure

Notification Screen Structure

Profile Screen Structure

Wallet Screen Structure

App Setting Screen Structure

Currency Screen Structure

Change Language Screen Structure

About Us Screen Structure

Term&Services Screen Structure

FAQ Screen Structure

Favicons

Logo Settings

Changing Fonts

Website Optimization Tips

Image Compression & Optimization

CSS & jQuery Minifications

Fast Web Hosting Servers

Header

Bottom Navigation Menu Structure

Components

Bootstrape Slider Structure

Bootstrape Accordian Structure

Bootstrape TabBar Structure

Columns & Grid

Bootstrap Grid

Helper Classes

Slider Types & their Options

Introduction

Animations

Icons

Images

jQuery

CSS & Fonts